import React, { Component } from "react";
import { View, Image, Text, TouchableOpacity, TextInput } from "react-native";
import NavBarConfig from "../modules/NavBar";
import http from "../../util/http";
import { PSW_CODE, PASSWORD, MEMBER } from "../../config/Api";
import Base64 from "../../util/base64";
import { toast } from "../../util/tip";
import { getTimer } from "../../util/util";
import passwordStyles from "../../style/pages/password";

class SetTradePassword extends Component {
  static navigationOptions = ({ navigation }) =>
    NavBarConfig(
      {
        headerTitle: "交易密碼設置",
        headerRight: []
      },
      navigation
    );
  state = {
    tel: "",
    verifyMsg: "獲取驗證碼",
    code: "",
    password: "",
    confirmPassword: "",

    isCodeRequesting: false,
    isModifyRequetsing: false
  };

  componentWillMount() {
    this.getMemberInfo();
  }

  async getMemberInfo() {
    const data = await http.get(MEMBER);
    this.setState({
      tel: data.data.tel
    });
  }

  async getVerifyCode() {
    if (this.state.isCodeRequesting) return;
    const value = this.state.tel;
    if (!value) {
      toast("手机号不能为空");
      return;
    }
    await this.setState({
      isCodeRequesting: true
    });
    const data = await http.post(PSW_CODE, {
      tel: this.state.tel
    });

    if (data) {
      getTimer(
        50,
        time => {
          this.setState({
            verifyMsg: `${time}s`
          });
        },
        () => {
          this.setState({
            verifyMsg: "獲取驗證碼"
          });
        }
      );
    }
    this.setState({
      isCodeRequesting: false
    });
  }

  handleChange(key, text) {
    let data = {};
    data[key] = text;
    this.setState({
      ...data
    });
  }

  async handleModifyPsw() {
    if (this.state.isModifyRequetsing) return;
    const password = this.state.password.trim();
    const confirmPassword = this.state.confirmPassword.trim();
    const code = this.state.code.trim();
    if (!code) {
      toast("請填寫驗證碼");
      return;
    }
    if (password.length !== 6) {
      toast("請輸入6位有效密碼");
      return;
    }
    if (confirmPassword.length !== 6) {
      toast("请输入6为有效确认密码 請輸入6位有效確認密碼");
      return;
    }

    if (password != confirmPassword) {
      toast("確認密碼與密碼需一致");
      return;
    }
    await this.setState({
      isModifyRequetsing: true
    });
    const data = await http.put(PASSWORD, {
      password: Base64.encode(password),
      code: code
    });
    if (data) {
      toast("修改成功");
      this.props.navigation.goBack();
    }
    this.setState({
      isModifyRequetsing: false
    });
  }

  render() {
    return (
      <View>
        <View style={passwordStyles.bgtLogo}>
          <View style={passwordStyles.setPwdList}>
            <View style={passwordStyles.setPwdItem}>
              <Image
                style={passwordStyles.bgtIcon}
                source={require("../../assets/verify-icon.png")}
              />
              <TextInput
            underlineColorAndroid="transparent"
                style={passwordStyles.input}
                placeholder="請輸入短信驗證碼"
                onChangeText={text => this.handleChange("code", text)}
                maxLength={6}
              />
              <TouchableOpacity
                onPress={this.getVerifyCode.bind(this)}
                disabled={
                  this.isCodeRequesting ||
                  !this.state.tel ||
                  this.state.verifyMsg !== "獲取驗證碼"
                }
              >
                <Text style={passwordStyles.button}>
                  {this.state.verifyMsg}
                </Text>
              </TouchableOpacity>
            </View>
            <View style={passwordStyles.setPwdItem}>
              <Image
                style={passwordStyles.bgtIcon}
                source={require("../../assets/psw-icon.png")}
              />
              <TextInput
            underlineColorAndroid="transparent"
              password={true}
              secureTextEntry={true}
                style={passwordStyles.input}
                placeholder="請輸入交易密碼"
                onChangeText={text => this.handleChange("password", text)}
                maxLength={6}
              />
            </View>
            <View style={passwordStyles.setPwdItem}>
              <Image
                style={passwordStyles.bgtIcon}
                source={require("../../assets/psw-icon.png")}
              />
              <TextInput
            underlineColorAndroid="transparent"
              password={true}
              secureTextEntry={true}
                style={passwordStyles.input}
                placeholder="請再次輸入交易密碼"
                onChangeText={text =>
                  this.handleChange("confirmPassword", text)
                }
                maxLength={6}
              />
            </View>
          </View>

          <TouchableOpacity onPress={this.handleModifyPsw.bind(this)}>
            <Text style={passwordStyles.setPswConfirm}>確定</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

export default SetTradePassword;
